<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <button @click="btnClick(item)" v-for="(item,index) in btnTextList">{{item}}</button>


        <h1>{{before}} {{calc}} {{back}} {{ res ? '= ' + res : '' }} </h1>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                btnTextList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '+', '-', '*', '/', '=', 'C'],
                before: '', // 前面的值
                back: '', // 后面的值
                calc: '', // 运算符号
                res: '', // 运算结果
            }
        },
        methods: {
            btnClick(value) {
                console.log('我们被点击了', value);

                if (value == '+' || value == '-' || value == '*' || value == '/') {
                    // 代表当前点击的是运算符号
                    this.calc = value
                } else if (value == '=') {
                    // 计算结果
                    switch (this.calc) {
                        case '+':
                            this.res = this.before * 1 + this.back * 1
                            break;
                        case '-':
                            this.res = this.before * 1 - this.back * 1
                            break;
                        case '*':
                            this.res = (this.before * 1) * (this.back * 1)
                            break;
                        case '/':
                            this.res = (this.before * 1) / (this.back * 1)
                            break;
                        default:
                            break;
                    }
                } else if (value == 'C') {
                    // 点击了清空
                    this.before = ''
                    this.calc = ''
                    this.back = ''
                    this.res = ''
                } else {
                    // 点击的是数字
                    if (this.calc) {
                        // 如果运算符号存在，那么就代表第一个值已经完成了
                        // 需要拼接第二个值
                        this.back += value
                    } else {
                        // 需要拼接第一个值
                        this.before += value
                    }
                }

            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>